import React, { Component } from 'react'
import { HotListWarp } from "../styledControl/Styled"
import { connect } from "react-redux"

import { Badge } from "antd-mobile"

class Hotlist extends Component {
    render() {
        return (
            <HotListWarp>
                <header>精品好菜</header>
                <div>
                    {
                        this.props.list.slice(0, 10).map(value => (
                            <figure key={value.id}>
                                <img src={value.img} alt=""/>
                                <figcaption>
                                    <h3>{ value.name }</h3>
                                    <h6>{ value.favorites } <Badge text="HOT" hot style={{ marginLeft: 0 }} /></h6>
                                </figcaption>
                            </figure>
                        ))
                    }
                </div>
            </HotListWarp>
        )
    }
}

export default connect(
    state => ({
        list: state.load
    })
)(Hotlist)
